<template>
    <div>
        <el-card>
            <!-- 搜索条件 -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="4">
                    <el-select v-model="alarmStatus" placeholder="报警状态">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="alarmRule" placeholder="报警规则">
                        <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
            <el-row justify="end" :gutter="20">
                <el-col :span="3">
                    <el-switch v-model="switchValue" class="" width="100" size="large" inline-prompt active-text="超出省略"
                        inactive-text="语音播报关" />
                </el-col>
                <el-col :span="3.5">
                    <el-button type="primary" @click="handleSearch">
                        <el-icon>
                            <Setting />
                        </el-icon>
                        消息推送设置
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="filteredAlarms" style="width: 100%">
                        <el-table-column prop="alarmId" label="报警ID"></el-table-column>
                        <el-table-column prop="time" label="报警时间"></el-table-column>
                        <el-table-column prop="rule" label="报警类型"></el-table-column>
                        <el-table-column prop="status" label="报警状态">

                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="primary" v-if="scope.row.status == '0'"
                                    @click="handleConfirm(scope.row)">处理</el-button>
                                <el-button v-if="scope.row.status == '1'">查看处理进度</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog v-model="centerDialogVisible" title="报警处理" align-center modal-class="custom-dialog">
            <div class="dialog-content">
                <div class="message">
                    <div class="info">
                        <div>站点名称：<span>清湖水厂-1号站</span></div>
                        <div>站点位置：<span>深圳市龙华区</span></div>
                    </div>
                    <div class="info">
                        <div>报警内容：<span style="color: red;">1号</span></div>
                    </div>
                </div>
                <h4>处理进度</h4>
                <div class="progress" style="height: 300px; max-width: 600px">
                    <el-steps space="60px" direction="vertical" :active="1">
                        <el-step title="Step 1" />
                        <el-step title="Step 2" />
                        <el-step title="Step 3" />
                    </el-steps>
                </div>
                <h4>处理建议</h4>
                <div class="suggestions">
                    <p>
                        过度开发和那里看啥克里斯蒂卡里的卡死了
                    </p>
                </div>
                <h4>处理操作</h4>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <el-radio-group v-model="radio1" size="large">
                            <el-radio value="0" size="large">远程调整设备参数</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="checkbox-item">
                        <el-radio-group v-model="radio1" size="large">
                            <el-radio value="1" size="large">安排人员现场维修</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="checkbox-item">
                        <el-radio-group v-model="radio1" size="large">
                            <el-radio value="2" size="large">暂时忽略（需填写原因）</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <el-input v-model="textarea" maxlength="30" input-style="margin-top:10px;width: 100%;height: 100px;" placeholder="Please input"
                   type="textarea" />
                <div class="btn-group">
                    <el-button type="primary" plain>取消</el-button>
                    <el-button type="primary" >提交处理</el-button>
                </div>
            </div>
        </el-dialog>


    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 数据和选项
const alarmStatus = ref('');
const alarmRule = ref('');
let switchValue = ref(false);
let centerDialogVisible = ref(false);
const dateRange = ref([]);
const alarms = ref([
    { alarmId: 'AL001', area: '东城区水管网A段', time: '2024-01-20 10:30:00', rule: '压力异常波动规则', probability: '85%', status: '0' },
    { alarmId: 'AL002', area: '西城区水管网B段', time: '2024-01-20 09:15:00', rule: '流量异常变化规则', probability: '65%', status: '1' },
]);

const statusOptions = [
    { value: '', label: '全部' },
    { value: '未确认', label: '未确认' },
    { value: '已确认', label: '已确认' }
];

const ruleOptions = [
    { value: '', label: '全部' },
    { value: '压力异常波动规则', label: '压力异常波动规则' },
    { value: '流量异常变化规则', label: '流量异常变化规则' }
];

// 计算属性：根据筛选条件过滤报警数据
const filteredAlarms = computed(() => {
    return alarms.value.filter(alarm => {
        const matchesStatus = !alarmStatus.value || alarm.status === alarmStatus.value;
        const matchesRule = !alarmRule.value || alarm.rule === alarmRule.value;
        // 时间范围的过滤逻辑可以根据实际需求调整
        const matchesDate = !dateRange.value.length || (new Date(alarm.time) >= new Date(dateRange.value[0]) && new Date(alarm.time) <= new Date(dateRange.value[1]));
        return matchesStatus && matchesRule && matchesDate;
    });
});

// 方法
function handleSearch() {
    // 执行查询操作
}

function handleReset() {
    alarmStatus.value = '';
    alarmRule.value = '';
    dateRange.value = [];
}

function handleDetails(alarm) {
    console.log('查看详情:', alarm);
}

function handleConfirm(alarm) {
    centerDialogVisible.value = true


}


onMounted(() => {
})
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
}

.dialog-content {
    height: 600px;
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    margin: 10px;

    h4 {
        font-size: 16px;
        color: black;
        font-weight: bold;
        margin: 20px 0;
    }

    .message {
        background: #f9fafb;
        border-radius: 8px;
        display: flex;
        flex-direction: column;

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            margin: 10px 0;
            padding: 0 10px;
        }
    }

    .progress {
        padding-left: 10px;
    }

    .suggestions {
        color: #3663dd;

        p {
            margin: 0;
            background: #eff6ff;
            padding: 14px;
            border-radius: 8px;
        }
    }
    .checkbox-group{
        display: flex;
        flex-direction: column;
        .checkbox-item{
            width: 100%;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 0px 10px;
            margin-bottom: 5px;
        }
    }
    .btn-group{
        display: flex;
        justify-content: flex-end;
        margin: 20px 0;
    }

}
</style>